<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom)+'px'}">
		<navbar></navbar>
		<view class="form" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="form-main">

				<view class="form-header">
					<view class="form-header-title">
						企业信息
					</view>
					<view class="form-header-tag">
						{{dist[info.status]}}
					</view>
				</view>
				<view class="registerClient">
					<text class="title require">企业全称</text>
					<view class="inp">
						<van-field v-model="info.title" name="pattern" placeholder="请输入企业全称"
							 :error-message="error.title" />
					</view>

					<!-- <text class="title">岗位类别</text>
					<view class="selectVant" @click="pickerShow('hangye')">
						<van-field readonly clickable name="zpyx" v-model="info.hangye" placeholder="请选择"
							:error-message="error.hangye"  :right-icon="imgUrl + 'under.png'"/>
					</view>

					<text class="title">招聘意向</text>
					<view class="selectVant" @click="pickerShow('gangwei')">
						<van-field readonly clickable name="zpyx" v-model="info.gangwei" placeholder="请选择"
							:error-message="error.gangwei"  :right-icon="imgUrl + 'under.png'"/>
					</view> -->

					<text class="title require">企业规模</text>
					<view class="selectVant" @click="pickerShow('guimo')">
						<van-field readonly clickable name="zpyx" v-model="info.guimo" placeholder="请选择"
							:error-message="error.guimo" :right-icon="imgUrl + 'under.png'" />
					</view>

					<text class="title">企业简介</text>
					<view class="textareaVant">
						<van-field v-model="info.description" rows="4" autosize type="textarea" placeholder="请输入文字描述"
							:error-message="error.description" input-class="textareaInp" />
					</view>

					<text class="title require">企业地址</text>
					<view class="selectVant mb10" @click="pickerShow('area')">
						<van-field readonly clickable name="area" v-model="info.city" placeholder="点击选择省市区"
							:error-message="error.city" :right-icon="imgUrl + 'under.png'" />
					</view>
					<view class="inp">
						<van-field v-model="info.addr" name="pattern" placeholder="填写详细地址"
							:error-message="error.addr" />
					</view>

					<text class="title">联系人</text>
					<view class="inp">
						<van-field v-model="info.name" name="pattern" placeholder="请填写联系人"
							:error-message="error.name" />
					</view>

					<text class="title">手机号（登录账号）</text>
					<view class="inpBox inp van-clearfix">
						<view class="inpBox-data">
							<input type="tel" v-model="info.tel" placeholder="请输入手机号" class="inp2"
								placeholder-class="inpP" />
							<view class="i"></view>
							<input type="number" v-model="info.code" placeholder="请输入验证码" class="inp2"
								placeholder-class="inpP" />
						</view>

						<view class="code" :class="{'disabled':isSend}" @click="sendCode">{{sendTitle || '获取验证码'}}
						</view>
					</view>

					<text class="title">微信号</text>
					<view class="inp">
						<van-field v-model="info.wechat" name="pattern" placeholder="请填写微信号"
							:error-message="error.wechat" />
					</view>

					<text class="title require">上传营业执照</text>
					<view class="upImgBox">
						<van-uploader @afterRead="afterRead" deletable="true">
							<view class="upBtn" v-if="!info.businessLicense">
								<van-icon name="plus" />
							</view>
							<image :src="baseImage + info.businessLicense" mode="widthFix"></image>
						</van-uploader>
						<!-- <view class="uploadImage" v-else>
							<image :src="baseImage + info.businessLicense" mode="widthFix"></image>
						</view> -->
					</view>

					<view class="formItem">
						<button class="submit" @click="submit">编辑信息</button>
					</view>

					<!-- 地址Select -->
					<van-popup position="bottom" :show="areaShowPicker">
						<van-area :areaList="areaList" @confirm="selectQydz" @cancel="onCelcel('area')" />
					</van-popup>

					<picker-view ref="pickerRef" :list="colums" @confirm="onConfirm"></picker-view>
				</view>

			</view>
		</view>
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {
		getMyCompanyInfo,
		updateCompanyMyInfo
	} from "@/core/web-api/qiyeduan.js"
	import {
		getData
	} from "@/core/web-api/common.js"
	import {
		areaList
	} from '@/node_k/area-data/areadata.js';
	import {
		validateFunc,uploadFile
	} from '@/utils/util.js'
	import {
		sendCodeFunc
	} from "@/core/web-api/login.js"
	import PickerView from '@/components/PickerView.vue';
	export default {
		components: {
			Navbar,
			PickerView
		},
		data() {
			return {
				colums: [],
				dist:{
					0:"已审核",
					1:"待审核",
					2:"审核拒绝"
				},
				info: {
					addr: "", //详细地址			
					businessLicense: "", //营业执照			
					city: "", //城市/区域			
					code: "", // 手机短信验证码			
					description: "", // 企业简介			
					email: "", // 邮箱			
					gangwei: "", // 意向岗位（多个之间，分割）			
					guimo: "", // 企业规模			
					hangye: "", // 所属行业			
					logo: "", // 公司logo			
					name: "", // 联系人			
					openid: "", // 用户唯一标识			
					picdir: "", // 企业封面			
					province: "", // 省份			
					tel: "", // 手机号			
					title: "", // 公司名称			
					wechat: "", // 微信号
					status:""
				},
				areaList: areaList,
				optionsMap: {
					guimoColums: [],
					// hangyeColums: [],
					// gangweiColums: [],
				},
				areaShowPicker: false,
				guimoShowPicker: false,
				hangyeShowPicker: false,
				gangweiShowPicker: false,
				time: 59,
				timer: null,
				sendTitle: "",
				isSend: false,
				error: {
					addr: "", //详细地址
					businessLicense: "", //营业执照			
					city: "", //城市/区域			
					code: "", // 手机短信验证码			
					description: "", // 企业简介			
					email: "", // 邮箱			
					// gangwei: "", // 意向岗位（多个之间，分割）			
					guimo: "", // 企业规模			
					// hangye: "", // 所属行业			
					logo: "", // 公司logo			
					name: "", // 联系人			
					openid: "", // 用户唯一标识			
					picdir: "", // 企业封面			
					province: "", // 省份			
					tel: "", // 手机号			
					title: "", // 公司名称	
				},
				type: "",
			}
		},
		methods: {
			/**
			 * 发送验证码
			 */
			sendCode() {
				let code = validateFunc(this.info.tel, 'tel')
				console.log(code)
				if (code != 2) {
					uni.showToast({
						title: code == 0 ? "请输入手机号码" : "手机号码格式错误",
						icon: "none"
					})
					return;
				}
				if (this.isSend) return;
				this.isSend = true;
				this.sendTitle = `${this.time}秒后重发`
				this.sendTel();
				this.timer = setInterval(() => {
					this.time--;
					this.sendTitle = `${this.time}秒后重发`
					if (this.time == 0) {
						clearInterval(this.timer);
						this.time = 60;
						this.isSend = false;
						this.sendTitle = "";
					}
				}, 1000)
			},
			/**
			 * 发送手机号验证码
			 */
			sendTel() {
				sendCodeFunc({
					phone: this.info.tel,
					type: "reg"
				}).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: "发送成功"
						})
					}
				})
			},
			/**
			 * 弹出弹窗
			 * @param {Object} type
			 */
			pickerShow(type) {
				this.type = type;
				if (type != 'area') {
					this.colums = this.optionsMap[type + "Colums"];
				}else{
					this.areaShowPicker = true;
					return;
				}
				if (type == 'gangwei') {
					if (!this.optionsMap.gangweiColums || this.optionsMap.gangweiColums.length == 0) {
						uni.showToast({
							title: "请选择岗位类别",
							icon: "none"
						})
						return;
					}
					this.$refs.pickerRef.open();
				} else {
					console.log(this.$refs.pickerRef)
					this.$refs.pickerRef.open();
				}
			},
			/**
			 * 上传图片
			 * @param {Object} 
			 */
			afterRead(e) {
				console.log(e);
				// uni.uploadFile({
				// 	url:this.$store.state.uploadUrl,
				// 	filePath:e.file.tempFilePath,
				// 	name:"file",
				// 	success:res=>{
				// 		console.log(res)
				// 		this.info.businessLicense = res;
				// 	}

				// })
				uploadFile(e.file).then(res => {
					this.info.businessLicense = res;
				})
			},
			onCelcel(type) {
				if (type == 'gangwei') {
					this.gangweiShowPicker = false;
				}
			},
			onConfirm() {
				let value = this.$refs.pickerRef.value;
				if (this.type == 'hangye') {
					this.info.hangye = value;
					let index = this.optionsMap.hangyeColums.findIndex(f => f.sort == value);
					this.optionsMap.gangweiColums = this.optionsMap.hangyeColums[index].datasetTreeVos;
				}
				this.info[this.type] = value
			},
			/**
			 * 选择地址
			 */
			selectQydz({
				values
			}) {
				this.info.city = values
					.filter((item) => !!item)
					.map((item) => item.name)
					.join('/');
				this.areaShowPicker = false;
			},
			/**
			 * 提交
			 */
			submit() {
				let valid = this.validate();
				if (!valid) {
					uni.showToast({
						title: "有必填项未填",
						icon: "none"
					})
					return;
				}
				updateCompanyMyInfo(this.info).then(res => {
					if (res.code == 20000) {
						// this.getUserInfo()
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					})

				})

			},
			validate() {
				const dist = {
					title: "企业全称",
					// hangye: "岗位类别",
					// gangwei: "招聘意向",
					guimo: "企业规模",
					description: "企业简介",
					city: "企业地址",
					addr: "详细地址",
					name: "联系人",
					tel: "手机号",
					code: "短信验证码",
					businessLicense: "营业执照",
				}
				let flag = true;
				for (let key in dist) {
					let code = validateFunc(this.info[key], key);
					if (code == 0) {
						flag = false;
						this.error[key] = dist[key] + "为必填项"
					} else if (code == 1) {
						flag = false;
						this.error[key] = dist[key] + "格式错误"
					} else if (code == 2) {
						this.error[key] = "";
					}
				}
				return flag;
			},
			/**
			 * 获取下级筛选
			 */
			getCataList() {
				let cataNames = ['招聘意向', '企业规模', '所属行业'];
				let cataList = ['gangweiColums', 'guimoColums', 'hangyeColums']
				getData({
					sortList: cataNames
				}).then(res => {
					console.log(res);
					let {
						list
					} = res.data;
					list.forEach(item => {
						let index = cataNames.findIndex(f => f == item.sort);
						this.optionsMap[cataList[index]] = item.list;
					})
					if (!this.userInfo || Object.keys(this.userInfo).length == 0) {
						this.getUserInfo()
					}else{
						this.getIterator(this.userInfo);
					}
				})
			},

			/**
			 * 获取企业信息
			 */
			getUserInfo() {
				getMyCompanyInfo().then(res => {
					if (res.code == 20000) {
						this.$store.commit("setUserInfo", res.data.detail)
						this.getIterator(res.data.detail);
					}
				})
			},

			/**
			 * 循环赋值
			 * @param {Object} obj
			 */
			getIterator(obj) {
				for (let key in this.info) {
					this.info[key] = obj[key];
				}
				if(this.info.hangye){
					let index = this.optionsMap.hangyeColums.findIndex(f => f.sort == this.info.hangye);
					this.optionsMap.gangweiColums = this.optionsMap.hangyeColums[index].datasetTreeVos;
				}
			}

		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['userInfo', 'baseImage','imgUrl'])
		},
		created() {
			this.getCataList();
		}
	}
</script>
<style scoped lang="less">
	.br {
		margin-bottom: 20upx;
	}

	.inp2 {
		display: inline-block;
		width: 200rpx;
		vertical-align: middle;
	}

	.inp2:first-child {
		margin-right: 7rpx;
	}

	.inpP {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
	}

	.inpBox {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 7rpx rgba(220, 220, 220, 0.35);
		border-radius: 10rpx;
		padding: 9rpx 8rpx 9rpx 26rpx;
		box-sizing: border-box;
		margin-bottom: 58rpx;
		display: flex;
		align-items: center;

		&-data {
			flex: 1;
			display: flex;

			input {
				font-size: 26upx;
			}
		}
	}

	.inpBox .i {
		width: 3rpx;
		height: 29rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		background: #666666;
		display: inline-block;
		vertical-align: middle;
		margin-right: 25rpx;
	}

	.code {
		width: 170rpx;
		background: #F9F9F9;
		border-radius: 6rpx;
		border: 1px solid #0180FF;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 22rpx;
		color: #0180FF;
		display: inline-block;
		vertical-align: middle;
		height: 50upx;
		line-height: 50upx;
	}

	.code.disabled {
		border-color: #ccc;
		color: #666;
	}

	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-line {
			display: flex;
			position: relative;
			width: 100%;

			&-title {
				text-align: center;
				font-size: 38upx;
				color: #000;
				width: 100%;
			}

			&-icon {
				position: absolute;
				left: 45upx;
				display: flex;
				align-items: center;
			}
		}

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
	}

	.upload {
		&-create {
			width: 295upx;
			height: 198upx;
			border-radius: 10upx;
			background-color: #e6e7e8;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.form {
		width: 100%;
		margin-top: 40upx;

		/deep/ .van-cell {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 7rpx rgba(220, 220, 220, 0.35);
			border-radius: 10rpx;
			padding: 9rpx 8rpx 9rpx 26rpx;
			box-sizing: border-box;
			margin-bottom: 58rpx;
			display: flex;
			align-items: center;
			margin-bottom: 0;
		}

		&-header {
			display: flex;
			align-items: center;
			padding-bottom: 25upx;
			border-bottom: 2upx solid #f6f6f6;
			margin-bottom: 30upx;
			justify-content: start;
			width: 100%;

			&-title {
				font-size: 40upx;
				color: #000000;
				font-weight: bold;
				margin-right: 10upx;
			}

			&-tag {
				width: 94upx;
				height: 30upx;
				line-height: 30upx;
				text-align: center;
				font-size: 20upx;
				color: #ffffff;
				border-radius: 14upx;
				background: linear-gradient(to right, #ff8300, #ffb700);
			}
		}

		&-main {
			background-color: #fff;
			padding: 30upx;
			border-radius: 8upx;
			box-sizing: border-box;

		}

	}


	.registerClient {
		width: 100%;
		background: #fff;
	}

	.textareaInp {
		min-height: 60px;
	}

	.title {
		width: 100%;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 16px;
		color: #000000;
		margin-bottom: 16px;
		padding-left: 5px;
		box-sizing: border-box;
		display: block;
		&.require{
			position: relative;
			&:before{
				content: '*';
				font-size: 28upx;
				color: #ff0000;
				position: absolute;
				left: -10upx;
			}
		}
	}

	.inp {
		width: 100%;
		background: #FFFFFF;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		box-sizing: border-box;
		margin-bottom: 23px;

	}

	.selectVant {
		width: 100%;
		background: #FFFFFF;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		position: relative;
		margin-bottom: 22px;
	}

	.selectVant::before {
		content: "";
		display: block;
		width: 20px;
		height: 16px;
		background-size: 100% 100%;
		position: absolute;
		top: 50%;
		margin-top: -9px;
		right: 15px;
		z-index: 1;
	}

	.textareaVant {
		width: 100%;
		max-height: 88px;
		background: #FFFFFF;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		box-sizing: border-box;
		margin-bottom: 22px;
		overflow: auto;
	}

	.mb10 {
		margin-bottom: 10px !important;
	}

	.inpBox {
		width: 100%;
		position: relative;
	}

	.inpBox canvas {
		width: 100%;
		height: 100%;
	}

	.graphicsCodeBox {
		width: 87px;
		height: 45px;
		box-sizing: border-box;
		position: absolute;
		right: 0;
		top: 0;
		padding: 5px;
		z-index: 99;
	}

	.getCodeBox {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		padding: 7px 10px 0 0;
		box-sizing: border-box;
		z-index: 2;
	}

	.getCodeBox .btn {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background: #F9F9F9;
		border-radius: 3px;
		border: 1px solid #0180FF;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 24upx;
		color: #0180FF;
		padding: 0 10upx;
		box-sizing: border-box;

		&.disabled {
			background-color: #f5f5f5;
			border-color: #eee;
			color: #666;
		}
	}

	.upImgBox {
		width: 100%;
		height: auto;
		overflow: hidden;
		position: relative;
		margin-bottom: 60px;
	}

	.uploadImage {
		width: 100%;
	}

	.uploadImage image {
		width: 100%;
	}

	.upBtn {
		width: 153px;
		height: 103px;
		background: #E6E7E8;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		text-align: center;
		line-height: 103px;
		font-size: 31px;
	}

	.submit {
		width: 100%;
		height: 42px;
		line-height: 42px;
		text-align: center;
		background: #0180FF;
		border-radius: 5px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 16px;
		color: #FFFFFF;
	}
</style>